<template>
  <div class="search-container">
    <div
      class="search"
      v-show="show"
      :class="{changewidth:width}"
    >
      <div
        class="search-bg"
        :class="{changewidth:width}"
      ></div>
      <img
        src="../../images/sousuo@2x.png"
        alt=""
        class="search_icon"
      >
      <input
        v-model="textVal"
        type="text"
        placeholder="搜索想要的商品"
        :class="{changewidth:width}"
      >
    </div>

  </div>
</template>

<script>
import { CheckIcon } from "vux";
import { setTimeout } from 'timers';
export default {
  components: {},
  data() {
    return {
      textVal: ""
    };
  },
  watch: {
    textVal: function() {
      this.$emit("textChange", this.textVal);
    }
  },
  mounted(){
    setTimeout(()=>{
      this.textVal = this.inputval
    })
  },
  props: {
    show: {
      type: Boolean,
      required: true
    },
    width: {
      type: String,
      required: false
    },
    inputval: {
      type: String,
      required: false
    }
  },
  name: "search"
};
</script>

<style lang="less">
// @width:this.Width,
body {
  box-sizing: border-box;
}
.search-container {
  position: relative !important;
  bottom: 0;
  width: 6.9rem;
  height: 0.6rem;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;

  .search {
    // background-color: rgba(126, 86, 198, 1);
    width: 5.68rem;
    height: 0.6rem;
    position: relative;
    top: 0;
    left: 0;
    // box-shadow:0px 0px 59px 7px rgba(209,209,209,0.46);
    .search-bg {
      background: rgba(255, 255, 255, 1);
      // box-shadow:0px 0px 59px 7px rgba(209,209,209,0.46);
      opacity: 0.4;
      display: block;
      position: absolute;
      width: 5.68rem;
      height: 0.6rem;
      line-height: .6rem;
      border-radius: 0.33rem;
    }
    .changewidth {
      width: 6.9rem;
    }
    .search_icon {
      position: absolute;
      bottom: 0.14rem;
      left: 0.24rem;
      width: 0.32rem;
      height: 0.32rem;
    }

    input::-webkit-input-placeholder {
      color: rgba(255, 255, 255, 0.5) !important;
    }

    input {
      padding: 0;
      margin: 0;
      outline: none;
      border: none;
      display: block;
      position: absolute;
      // left: .77rem;
      bottom: 0rem;
      width: 5.68rem;
      text-indent: 0.77rem;
      height: 0.62rem;
      line-height: 0.62rem;
      font-size: 0.27rem;
      background-color: transparent;
      font-family: PingFangTC-Light;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }
  }
}
</style>
